<template>
    <el-dialog
      title="编辑知识库"
      :visible.sync="dialogTableVisible"
      :show-close="true"
      :center="true"
      top="25vh"
      :before-close="beforeClose"
      :close-on-click-modal="false"
    >
      <div class="dialogVue">
        <div class="inpVue">
          <div class="label">知识库名称</div>
          <el-input placeholder="请输入知识库名称" v-model="name" style="margin-top: 10px;" :maxlength="20"></el-input>
        </div>
        <div class="inpVue">
          <div class="label">知识库描述</div>
          <textarea v-model="repositoryDescription" :maxlength="30" placeholder="请输入知识库描述"></textarea>
        </div>
        <div class="btnVue flex_center">
          <div class="cancel" @click="beforeClose">取消</div>
          <div style="width: 20px"></div>
          <div class="btn" @click="editFun">
              <span class="el-icon-loading" v-if="loading"></span>
              <span v-else>确定</span>
          </div>
        </div>
      </div>
    </el-dialog>
  </template>
  
  
  <script>
  import { toast } from '@/common/tools'
  export default {
    props: {
      dialogTableVisible: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        name: "",
        repositoryDescription: "",
        loading: false
      }
    },
    methods: {
      // 获取提示词列表
      getDetail(id) {
        this.$post("/front/dataset/datasetDetail", {id: id}).then(res => {
            if(res.data.code===0) {
                this.name = res.data.obj.name
                this.repositoryDescription = res.data.obj.describe
                this.id = res.data.obj.id
            }
        })
      },
  
      beforeClose() {
        this.name = ""
        this.repositoryDescription = ""
        this.$emit("beforeClose")
      },
  
      // 修改知识库
      editFun(){
            if(!this.name) return toast(1, "请输入知识库名称")
            if(!this.repositoryDescription) return toast(1, "请输入知识库描述")
            if(this.loading) return
            this.loading = true
            this.$post("/front/dataset/updateDataset", {
                id: this.id,
                name: this.name,
                describe: this.repositoryDescription
            }).then(res=>{
                this.loading = false
                if(res.data.code===0) {
                    this.beforeClose()
                    toast(0, "编辑成功")
                    this.$emit("callback")
                }else{
                    toast(1, res.data.msg)
                }
            })
        },
    }
  }
  </script>
  
  
  <style lang="less" scoped>
  :deep(.el-dialog) {
    width: 460px !important;
    height: 50vh !important;
    border-radius: 10px;
    box-sizing: border-box;
  }
  :deep(.el-dialog__body) {
    padding: 0 20px 20px;
  }
  
  .inpVue {
    width: 100%;
    margin-top: 20px;
    .label {
      color: #333;
      font-size: 12px;
    }
    textarea {
      width: 100%;
      height: 160px;
      border: #dcdfe6 1px solid;
      display: block;
      box-sizing: border-box;
      resize: none;
      border-radius: 4px;
      margin-top: 10px;
      font-family: PingFangSC, PingFang SC;
      padding: 10px;
      font-size: 13px;
      line-height: 1.4;
    }
    ::-webkit-input-placeholder {
      /* WebKit browsers */
      color: #aaa;
      font-size: 13px;
      font-family: PingFangSC, PingFang SC;
    }
    :-moz-placeholder {
      /* Mozilla Firefox 4 to 18 */
      color: #aaa;
      font-size: 13px;
      font-family: PingFangSC, PingFang SC;
    }
    ::-moz-placeholder {
      /* Mozilla Firefox 19+ */
      color: #aaa;
      font-size: 13px;
      font-family: PingFangSC, PingFang SC;
    }
    :-ms-input-placeholder {
      /* Internet Explorer 10+ */
      color: #aaa;
      font-size: 13px;
      font-family: PingFangSC, PingFang SC;
    }
    textarea::-webkit-scrollbar {
      width: 0;
      height: 0;
    }
  }
  .btnVue {
    width: 100%;
    height: 40px;
    position: absolute;
    left: 0;
    bottom: 20px;
    background: #fff;
    z-index: 999;
    .cancel,
    .btn {
      width: 200px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      border-radius: 5px;
      cursor: pointer;
    }
    .cancel {
      background: #f5f5f5;
    }
    .btn {
      background: #0147fd;
      color: #fff;
      span {
        color: #fff;
      }
    }
  }
  .selectVue {
    width: 100%;
    height: calc(80vh - 64px - 48px - 40px - 40px - 40px);
    margin-top: 10px;
    overflow-y: scroll;
    .select {
      width: 405px;
      height: 120px;
      border-radius: 6px;
      border: 1px solid #eee;
      margin-bottom: 10px;
      cursor: pointer;
      padding: 10px;
    }
    .active {
      border: #0147fd 1px solid;
      background: rgba(1, 71, 253, 0.1);
    }
    .li {
      font-size: 12px;
      color: #444;
      padding-top: 6px;
      line-height: 1.2;
    }
  }
  .selectVue::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
  .h8 {
    padding-top: 30px;
    color: #606266;
  }
  .code {
    width: 300px;
    height: 300px;
    background: #f5f5f5;
    border-radius: 4px;
    span {
      font-size: 28px;
    }
  }
  </style>